<template>
  <div class="page">
    <div class="flex a-c j-sb">
      <!-- 返回 -->
      <div class=" flex a-c">
        <Icon type="ios-arrow-back" size="24" />
        <div class="ml-16 col-222 f-24 lin-34 bold">
          {{ $t('user.withdraw') }}
        </div>
      </div>
      <!-- 提现记录 -->
      <router-link to="withdraw/record" class="col-222 f-16 lin-22">{{ $t('user.withdrawalRecord') }}</router-link>
    </div>

    <Divider />

    <div class="tips-error">
      <span class="icon">
        <Icon type="ios-alert" />
      </span>
      <div class="cont">
        {{ $t('setting.withdrawNoteRight') }}
      </div>
    </div>

    <div class="withdraw-form">
      <div class="form-item">
        <div class="item-title">
          <span class="title">Withdrawal Account:</span>
          <div class="tools">
            <Button type="text" class="danger">+Add collection account</Button>
            <Button type="text" @click="() => dialogAccountVisible = true">Select Withdrawal Account</Button>
          </div>
        </div>
        <div class="item-cont">
          <div class="account-info">
            <div class="account-item">
              <div class="label">Recipient Currency:</div>
              <div class="text">--</div>
            </div>
            <div class="account-item">
              <div class="label">Recipient Name:</div>
              <div class="text">--</div>
            </div>
            <div class="account-item">
              <div class="label">Bank Name:</div>
              <div class="text">--</div>
            </div>
            <div class="account-item">
              <div class="label">Bank Card Number:</div>
              <div class="text">--</div>
            </div>
          </div>

        </div>
      </div>

      <div class="form-item">
        <div class="item-title">
          <span class="title">Withdrawal Account:

            <span class="text">Current Balance：CNY 0</span>
          </span>
        </div>

        <div class="item-cont">
          <div class="desc">Estimated withdrawal amount to the account ≈ <span class="num">0</span> ，The actual amount
            received shall be subject
            to payment</div>

          <div class="form-submit">
            <Input>
            <span slot="append">≈(USD)</span>
            </Input>

            <Button type="primary">Withdraw</Button>
          </div>
        </div>
      </div>
    </div>


    <!-- 可提现余额 -->
    <div class="withdraw-f5f mt-17 flex a-c pl-24 pt-34 pb-34">
      <img class="f5f-icon" src="@/assets/images/user/withdraw-f5f-icon.png" alt="">
      <div class="ml-16">
        <div class="flex a-c">
          <div class="col-888 f-14 lin-20">
            {{ $t('setting.withdrawAmount') }}(CNY)
          </div>
          <!-- 提现申请流程  -->
          <div class="c-p flex a-c ml-10" @click="withdrawNotice">
            <div class="mr-4 col-222 f-14 lin-20">
              {{ $t('setting.withdrawProcess') }}
            </div>
            <Icon type="ios-arrow-forward" size="16" color="#222" />
          </div>
        </div>
        <div class="col-222 f-16 lin-45 flex a-c">
          <div>
            ￥
          </div>
          <div class="lin-45 f-32 bold ml-8">{{ userInfo.amountCny }}</div>
        </div>
      </div>
    </div>
    <!-- 特别说明 -->
    <div class="flex a-c mt-8 pl-24 pt-16 pb-16 pr-24 withdraw-explain">
      <img class="explain-icon" src="@/assets/images/user/withdraw-tip.png" alt="">
      <div class="f-1 pl-8 col-d47 f-14 lin-20">
        <span class="bold">{{ $t('setting.withdrawNoteLeft') }}: </span>
        <span>{{ $t('setting.withdrawNoteRight') }}</span>
      </div>
    </div>
    <!-- 申请提现 -->
    <div class="withdraw-balance mt-8">
      <div class="balance-222 p-24 bg-222">
        <div class="col-fff f-14 lin-20">
          {{ $t('setting.withdrawInputSub') }} <span style="opacity: 0.5;">{{ $t('setting.minWithAmount') }}</span>
        </div>
        <div class="flex a-e j-sb mt-8">
          <div class="f-1 balance-num pb-10 flex a-c">
            <div class="col-fff f-16 lin-48 mr-8">
              ￥
            </div>
            <Input class="balance-input" v-model="form.amount" @on-change="valueChange"
              :placeholder="$t('setting.accountInputPlaceholder')">
            </Input>
          </div>
          <div class="balance-max flex a-c j-c col-fff f-14 lin-14 ml-20 c-p" @click="onMax">
            MAX
          </div>
        </div>
        <div class="flex a-c mt-12 f-14 lin-20">
          <div class="balance-circle"></div>
          <div class="col-fff ml-4">
            {{ $t('setting.withdrawCanMax') }}
          </div>
          <div class="col-ff1 ml-8">
            ¥ {{ userInfo.amountCny }}
          </div>
        </div>
      </div>
    </div>
    <div class="pl-30">
      <div class="withdraw-account pt-40 pl-30">
        <!-- 优先提现账户(默认) -->
        <div class="pos-r col-222 bold f-18 lin-25">
          {{ $t('setting.withdrawAccountDefault') }}
          <div class="account-circle pos-a"></div>
        </div>
        <div class="col-888 f-14 lin-20 mt-8">
          {{ $t('setting.withdrawAccountDefaultSub') }}
        </div>
        <div class="flex mt-16">
          <div class="flex a-c pl-20 pr-20 pt-16 pb-16 account-return">
            <div class="return-circle flex a-c j-c">
              <div class="circle-center bg-ff1"></div>
            </div>
            <img class="return-icon ml-10" src="@/assets/images/user/withdraw-account-return.png" alt="">
            <div class="ml-16 col-222 f-14 lin-20">
              {{ $t('setting.withdrawRefundAccount') }}
            </div>
          </div>
        </div>
        <!-- 备用提现账户 -->
        <div class="pos-r col-222 bold f-18 lin-25 mt-40">
          {{ $t('setting.withdrawBackupAccount') }}
          <div class="account-circle pos-a"></div>
        </div>
        <div class="mt-8 col-888 f-14 lin-20">
          <span class="f-24">·</span>
          {{ $t('setting.withdrawBackupAccountSub') }}
        </div>
        <div class="col-888 f-14 lin-20">
          <span class="f-24">·</span>
          {{ $t('setting.withdrawBackupAccountSub1') }}
        </div>
        <div class="mt-16 bg-f5f p-24">
          <!-- 提现渠道 -->
          <div class="col-222 f-14 lin-20">
            {{ $t('setting.withdrawChannel') }}
          </div>
          <!-- 选择提现渠道 -->
          <div class="mt-8">
            <withdraw-channel :accountType="accountType" @changeChannel="accountChange"></withdraw-channel>
          </div>
          <div class="mt-24 flex a-c j-sb">
            <!-- 提现账号 -->
            <div class="col-222 f-14 lin-20">
              {{ $t('user.withdrawalAccount') }}
            </div>
            <!-- 新增提现账号 -->
            <div class="flex a-c c-p" @click="accountOpen">
              <Icon type="ios-add-circle-outline col-222 f-14 lin-14" />
              <div class="col-222 f-14 lin-20 ml-4">
                {{ $t('setting.settingAddAccount') }}
              </div>
            </div>
          </div>
          <div class="mt-7">
            <withdraw-select ref="selectRef" :accountType="accountType" :firstType="2" @idSend="selectSuccess">
            </withdraw-select>
          </div>
        </div>
        <!-- 提现 -->
        <div class="pos-r col-222 bold f-18 lin-25 mt-40">
          {{ $t('user.withdraw') }}
          <div class="account-circle pos-a"></div>
        </div>
        <div class="mt-8 col-888 f-14 lin-20">
          {{ $t('setting.withdrawConfirmSub') }}
        </div>
      </div>
      <!-- 申请提现 -->
      <div class="pl-30 flex mt-16">
        <div @click="onShowPop" class="br-2 col-fff f-16 lin-16 bg-ff1 flex a-c j-c withdraw-confirm c-p plr-16">
          {{ $t('setting.withdrawConfirmBtn') }}
        </div>
      </div>
    </div>
    <!-- 常见问题 -->
    <div class="mt-40">
      <withdraw-faq :type="'balance'"></withdraw-faq>
    </div>
    <!-- 二次确认提现 -->
    <withdraw-confirm ref="confirmsRef" @submitSuccess="submitSuccess"></withdraw-confirm>

    <Modal v-model="dialogAccountVisible" title="Select Address" footer-hide :width="1000">
      <Table :columns="accountTableColumns" :data="accountTableData"></Table>
    </Modal>
  </div>
</template>
<script>
import { mapState } from "vuex";
import withdrawFaq from "./withdraw-faq.vue";
import withdrawChannel from "./withdraw-channel.vue";
import withdrawSelect from "./withdraw-select.vue";
import withdrawConfirm from "./withdraw-confirm.vue";
import { inputDigit } from '@/common/common';

export default {
  components: { withdrawFaq, withdrawChannel, withdrawSelect, withdrawConfirm },
  data() {
    return {
      accountType: 2,//1 银行卡;2-payPal账号
      form: {
        amount: '', // 提现金额
        type: 'amount', // 类型(amount：账户余额、 commission：佣金余额)
        userCardId: '' // 用户卡片ID
      },
      dialogAccountVisible: false,
      accountTableColumns: [
        {
          title: 'Recipient Name',
          key: 'accountName',
        },
        {
          title: 'Recipient Currency',
          key: 'bankName',
        },
        {
          title: 'Bank Name',
          key: 'bankCardNumber',
        },
        {
          title: 'Bank Card Number',
          key: 'bankCardNumber',
        },
        {
          title: 'Operation',
          key: 'operation',
          width: 200
        }
      ],
      accountTableData: []
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    //后退
    backBtn() {
      this.$router.back();
    },
    //显示二次确认弹窗
    onShowPop() {
      // if (!this.form.userCardId) {
      //   this.$Message.error(this.$t('user.pleaseSelectWithdrawalAccount'));
      //   return false;
      // }
      if (this.form.amount < 10) {
        this.$Message.error(this.$t('user.minWithTips'));
        return;
      }
      //大于最大值
      if (this.form.amount > this.userInfo.amountCny) {
        this.$Message.error(this.$t('setting.withdrawOverMax'));
        setTimeout(() => {
          this.form.amount = this.userInfo.amountCny;
        }, 500)
        return;
      }
      this.$refs.confirmsRef.open(this.form);
    },
    //提现最大值
    onMax() {
      this.form.amount = this.userInfo.amountCny;
    },
    //提现渠道切换
    accountChange(index) {
      if (this.accountType != index) {
        this.accountType = index;
        setTimeout(() => {
          this.selectInit();
        }, 10)
      }
    },
    //选择账号，接收子组件发送的id
    selectSuccess(obj) {
      this.form.userCardId = obj.id;
    },
    //重置选择
    selectInit() {
      this.$refs.selectRef.init();
    },
    accountOpen() {
      this.$refs.selectRef.addOpen();
    },
    //提现成功
    submitSuccess() {
      this.form.amount = '';
    },
    //提现流程
    withdrawNotice() {
      this.$router.push(`/noticeCode/Withdrawal`);
    },
    valueChange() {
      if (this.form.amount) {
        this.$nextTick(() => {
          this.form.amount = inputDigit(this.form.amount);
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
.page {
  border-radius: 20px;
  background: #FFF;
  padding: 30px;

  .tips-error {
    border-radius: 8px;
    background: #FFE8F0;
    display: flex;
    padding: 16px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    color: #FF186B;
    font-size: 12px;
    margin-bottom: 30px;
  }

  .withdraw-form {
    .form-item {
      margin-bottom: 20px;

      .item-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .title {
          color: #2F333A;
          font-size: 15px;
          font-weight: 600;

          .text {
            color: #CACACA;
            text-align: center;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
          }
        }

        .tools {
          font-size: 13px;

          /deep/ .ivu-btn {
            font-size: 13px;

            &.danger {
              color: #FF186B;
            }
          }
        }
      }

      .desc {
        color: #969696;

        font-size: 13px;

        .num {
          color: #FF186B;
        }
      }
    }
  }

  .account-info {
    border-radius: 8px;
    border: 1px solid #F5F5F5;
    background: #F5F5F5;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;

    .account-item {
      width: 50%;
      margin-bottom: 20px;
    }

    .label {
      color: #969696;
      font-family: Inter;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
  }

  .form-submit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    gap: 16px;
  }

  .back-icon {
    width: 32px;
    height: 32px;
  }

  .withdraw-f5f {
    background: #F5F5F5;

    .f5f-icon {
      width: 56px;
      height: 56px;
    }
  }

  .withdraw-explain {
    background: #FFF6E7;

    .explain-icon {
      width: 24px;
      height: 24px;
    }
  }

  .withdraw-balance {
    .balance-222 {
      .balance-max {
        height: 48px;
        width: 80px;
        background: #4A4A4A;
      }

      .balance-circle {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #fff;
      }

      .balance-num {
        border-bottom: 1px solid #444;
      }

      .balance-input {
        /deep/ .ivu-input {
          background: transparent;
          border: none;
          padding: 0;
          font-size: 48px;
          line-height: 68px;
          font-weight: 400;
          height: 68px;
          color: #fff;
        }
      }
    }
  }

  .withdraw-account {
    border-left: 1px solid #E2E2E2;

    .account-circle {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #D8D8D8;
      top: 2px;
      bottom: 0;
      left: -40px;
    }

    .account-return {
      border: 1px solid #E2E2E2;

      .return-icon {
        width: 40px;
        height: 40px;
      }

      .return-circle {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1px solid #FF186B;

        .circle-center {
          width: 10px;
          height: 10px;
          border-radius: 50%;
        }
      }
    }
  }

  .withdraw-confirm {
    height: 48px;
    min-width: 112px;
  }
}
</style>